<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">菜单管理</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!home">首页</a>
          <a><cite>菜单管理</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
        <!--      所属应用：<select id="menu_clients" lay-filter="menu_clients"></select>
            &emsp;搜索：<input id="menus-edit-search" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp;
            <button id="menus-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button id="menus-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
            <button id="menus-btn-expand" class="layui-btn">全部展开</button>
            <button id="menus-btn-fold" class="layui-btn">全部折叠</button>-->
        </div>

        <!-- 数据表格 -->
        <table class="layui-table" id="menus-table" lay-filter="menus-table"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="menus-state">
  {{#  if(ifupdate&&d.type<2){   }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
     {{#     } }} 
  {{#  if(ifdel&&d.type<2){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
   {{#     } }} 
</script>
<!-- 表格操作列 -->
<script type="text/html" id="toolbar">
     {{#  if(ifsave){ }}
       <button id="menus-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
       {{#     } }} 
  
            <button id="menus-btn-expand" class="layui-btn">全部展开</button>
            <button id="menus-btn-fold" class="layui-btn">全部折叠</button>
</script>


<script>
var ifsave=false,ifupdate=false,ifdel=false;
    layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects', 'treetable' ,'element','laytpl',],function () {
        let table = layui.table;
        let layer = layui.layer;
        let admin = layui.admin;
        var treetable = layui.treetable;
        let config = layui.config;
        let form = layui.form;
        let laytpl = layui.laytpl;
        let element = layui.element;
        
         
          
           config.getUser().permissions.forEach(function(item,index){
        	   if(item == "sys:sysmenu:save"){
        		   ifsave=true;
        	   }else if(item == "sys:sysmenu:update"){
        		   ifupdate=true;
        	   }else if(item == "sys:sysmenu:delete"){
        		   ifdel=true;
        	   }
           })
        // 渲染表格
    //直接解析字符
		  laytpl($("#toolbar")[0].innerHTML).render({ }, function(html){
			  $(".layui-card-body .toolbar").after(html);
			  element.render('nav');
		  });
  
       var renderTable = function (param) {
	        treetable.render({
	                treeColIndex: 1,//树形图标显示在第几列
	                treeSpid: 0,  ////最上级的父级id
	                treeIdName: 'menuId',
	                treePidName: 'parentId',
	                elem: '#menus-table',
	                treeDefaultClose: true,//是否默认折叠
	                treeLinkage: false,//父级展开时是否自动展开所有子级
	                url: config.base_server + 'sys/sysmenu/findAlls',
	                where: param,
	                id:"menu" ,
	                page: false,
	                cols: [[
	                    {type: 'numbers'},
	                    {field: 'name', minWidth: 200, title: '菜单名称'},
	                    {field: 'url', title: '菜单url'},
	                    {field: 'path', title: '菜单path'},
	                    {field: 'icon',  align: 'center', title: '样式'},
	                  
	                    {field: 'orderNum', width: 80, align: 'center', title: '排序号'},
	                    {
	                        field: 'type', width: 80, align: 'center', templet: function (d) {
	                            if (d.type === 2) {
	                                return '<span class="layui-badge layui-bg-green">资源</span>';
	                            }
	                            if (d.parentId === 0) {
	                                return '<span class="layui-badge layui-bg-blue">目录</span>';
	                            } else {
	                                return '<span class="layui-badge-rim  layui-bg-orange">菜单</span>';
	                            }
	                        }, title: '类型'
	                    },
	                    {templet: '#menus-state', width: 120, align: 'center', title: '操作'}
	                ]],
	            
	                done:function(d){
	                	 
	                
	                	 
	                }
	            });
           }
         
       renderTable({});

 

        // 工具条点击事件
        table.on('tool(menus-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') {
                layer.confirm('确定删除此菜单吗？', function () {
                    layer.load(2);
                
                    admin.req('sys/sysmenu/delete/'+obj.data.menuId , {}, function (data) {
                        layer.closeAll('loading');
                        if (0 === data.code) {
                            layer.msg(data.msg, {icon: 1, time: 500});
                      
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 500});
                        }
                        renderTable({});
                    }, 'DELETE');
                });
            }
        });

        // 显示编辑弹窗
        var showEditModel = function (data) {
           
            let title = data ? '修改菜单' : '添加菜单';
            if (data){
                data.type = data.type.toString();
                data.method="update";
            } else {
                data = {};
                data.method="save";
            }
    
            admin.putTempData('t_menus', data);

            admin.popupCenter({
                title: title,
                path: 'pages/system/menus_form.html',
                finish: function () {
                	  renderTable({});
                }
            });
        };

        // 添加按钮点击事件
        $('#menus-btn-add').click(function () {
            showEditModel();
        });

        // 搜索按钮点击事件
        $('#menus-btn-search').click(function () {
            var keyword = $('#menus-edit-search').val();
            var searchCount = 0;
            $('#menus-table').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                $(this).css('background-color', 'transparent');
                var text = $(this).text();
                if (keyword !== '' && text.indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount === 0) {
                        $('.layui-tab-item.layui-show').stop(true);
                        $('.layui-tab-item.layui-show').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (keyword !== '' && searchCount === 0) {
                layer.msg("没有匹配结果", {icon: 5, time: 500});
            } else {
                treetable.expandAll('#menus-table');
            }
        });

        $('#menus-btn-expand').click(function () {
            treetable.expandAll('#menus-table');
        });

        $('#menus-btn-fold').click(function () {
            treetable.foldAll('#menus-table');
        });

        // 应用下来框点击事件
    /*     form.on('select(menu_clients)', function(data){
            renderTable({tenantId: data.value});
        }); */
    });
</script>